<template>
  <!-- 新增-->
  <component
    wd="900"
    :is="cfg.model"
    v-model:window_open="data.md_new"
    :title="`新增角色数据`"
  >
    <template #content>
      <div>
        <div class="stitle">· 头像信息 ·</div>
        <div class="_box0">
          <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
            <n-gi span="2">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>上传头像：</div>
                </div>
                <div class="_2_val">
                  <n-upload
                    list-type="image-card"
                    :action="`https://gtimg.ww2.ren/upload.php?type=upimg_ava&authkey=${cfg.user?.authkey}&uid=${cfg.user?.uid}`"
                    @finish="set.imgfin_new"
                    :max="2"
                  >
                    <n-upload-dragger> 上传图片 </n-upload-dragger>
                  </n-upload>
                  <div>必须是解包头像的文件名，不能重命名</div>
                  <div>包含_myth自动识别为开花头像</div>
                </div>
              </div>
            </n-gi>
          </n-grid>
        </div>
        <div class="_box0">
          <div class="stitle">· 角色配置 ·</div>
          <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>角色名称：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.name"
                    placeholder="请输入名称"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>角色星级：</div>
                </div>
                <div class="_2_val">
                  <n-select v-model:value="data.ld_data.star" :options="set.star" />
                </div>
              </div>
            </n-gi>
            <n-gi span="2">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>角色别名：</div>
                </div>
                <div class="_2_val">
                  <n-flex vertical>
                    <n-button style="width: 100px" size="small" @click="set.bnamepush"
                      ><n-icon size="18"> <Add /> </n-icon> 添加别名</n-button
                    >
                    <template v-for="(item2, key2) in data.ld_data.bname">
                      <n-flex :wrap="false" class="dfcc">
                        <n-input
                          :size="cfg.sizebtn"
                          v-model:value="data.ld_data.bname[key2]"
                          placeholder="请输入名称"
                        />
                        <n-button
                          size="small"
                          :size="cfg.sizebtn"
                          @click="set.bnamedel(key2)"
                          ><n-icon size="18"> <Delete /> </n-icon
                        ></n-button>
                      </n-flex>
                    </template>
                  </n-flex>
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>角色属性：</div>
                </div>
                <div class="_2_val">
                  <n-select v-model:value="data.ld_data.shu" :options="set.ss" />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>头像路径：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.icon"
                    placeholder="上传头像后自动输入头像路径"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>开花路径：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.mythicon"
                    placeholder="上传头像后自动输入头像路径"
                  />
                </div>
              </div>
            </n-gi>
          </n-grid>
        </div>
      </div>
    </template>
    <template #footer>
      <n-button type="gt_y" :size="cfg.sizebtn" @click="set.save_new(data.ld_data)"
        >新增角色</n-button
      >
    </template>
  </component>

  <!-- 编辑 -->
  <component
    wd="900"
    :is="cfg.model"
    v-model:window_open="data.md_edit"
    :title="`编辑〔${data.ld_data.name}〕角色数据`"
  >
    <template #content>
      <div>
        <div class="_box0">
          <div class="stitle">· 角色配置 ·</div>
          <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>角色名称：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.name"
                    placeholder="请输入名称"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>角色星级：</div>
                </div>
                <div class="_2_val">
                  <n-select v-model:value="data.ld_data.star" :options="set.star" />
                </div>
              </div>
            </n-gi>
            <n-gi span="2">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>角色别名：</div>
                </div>
                <div class="_2_val">
                  <n-flex vertical>
                    <n-button style="width: 100px" size="small" @click="set.bnamepush"
                      ><n-icon size="18"> <Add /> </n-icon> 添加别名</n-button
                    >
                    <template v-for="(item2, key2) in data.ld_data.bname">
                      <n-flex :wrap="false" class="dfcc">
                        <n-input
                          :size="cfg.sizebtn"
                          v-model:value="data.ld_data.bname[key2]"
                          placeholder="请输入名称"
                        />
                        <n-button
                          size="small"
                          :size="cfg.sizebtn"
                          @click="set.bnamedel(key2)"
                          ><n-icon size="18"> <Delete /> </n-icon
                        ></n-button>
                      </n-flex>
                    </template>
                  </n-flex>
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>角色属性：</div>
                </div>
                <div class="_2_val">
                  <n-select v-model:value="data.ld_data.shu" :options="set.ss" />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>头像路径：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.icon"
                    placeholder="上传头像后自动输入头像路径"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>开花路径：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.mythicon"
                    placeholder="上传头像后自动输入头像路径"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi>
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>角色加载屏蔽：</div>
                </div>
                <div class="_2_val">
                  <n-select
                    v-model:value="data.ld_data.bantag"
                    multiple
                    :options="set.pbtag2"
                  />
                </div>
              </div>
            </n-gi>

            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>本体暴击率加成：</div>
                </div>
                <div class="_2_val">
                  <n-input-number
                    v-model:value="data.ld_data.br_bjl1"
                    :size="cfg.sizebtn"
                  />
                </div>
              </div>
            </n-gi>
          </n-grid>
        </div>
        <div class="_box0">
          <n-input
            v-model:value="data.ld_data.text"
            placeholder="自动调整尺寸"
            type="textarea"
          />
        </div>
        <div class="_box0">
          <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
            <n-gi span="2"> <div class="stitle">· 本专配置 ·</div></n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>异常类型：</div>
                </div>
                <div class="_2_val">
                  <n-select v-model:value="data.ld_data.ycl" :options="set.ycl" />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>异常数值：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.yc"
                    placeholder="请输入异常数值"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>连锁转异常类型：</div>
                </div>
                <div class="_2_val">
                  <n-select v-model:value="data.ld_data.ycl_chain" :options="set.ycl" />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>连锁最低时间：</div>
                </div>
                <div class="_2_val">
                  <n-input-number
                    v-model:value="data.ld_data.chain_time"
                    :size="cfg.sizebtn"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>专武名称：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.zw_1.name"
                    placeholder="请输入专武名称"
                  />
                </div>
              </div>
            </n-gi>

            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>刻印类型：</div>
                </div>
                <div class="_2_val">
                  <n-select
                    v-model:value="data.ld_data.zw_1.ky"
                    :options="[
                      {
                        label: `生命值`,
                        value: 'hp',
                      },
                      {
                        label: `技能伤害`,
                        value: 'skill',
                      },
                      {
                        label: `攻击力`,
                        value: 'atk',
                      },
                      {
                        label: `恢复能力`,
                        value: 'heal',
                      },
                      {
                        label: `暴击抗性`,
                        value: 'chr',
                      },
                      {
                        label: `暴击率`,
                        value: 'chc',
                      },
                    ]"
                  />
                </div>
              </div>
            </n-gi>

            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>专武暴击率加成：</div>
                </div>
                <div class="_2_val">
                  <n-input-number
                    v-model:value="data.ld_data.zw_bjl1"
                    :size="cfg.sizebtn"
                  />
                </div>
              </div>
            </n-gi>

            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>连锁暴击率加成：</div>
                </div>
                <div class="_2_val">
                  <n-input-number
                    v-model:value="data.ld_data.ls_bjl1"
                    :size="cfg.sizebtn"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>队长暴击率加成：</div>
                </div>
                <div class="_2_val">
                  <n-input-number
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.ld_bjl1"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>队伍暴击率加成：</div>
                </div>
                <div class="_2_val">
                  <n-input-number
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.tm_bjl1"
                  />
                </div>
              </div>
            </n-gi>

            <n-gi span="2"> <div class="stitle">· 二专配置 ·</div></n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>异常类型：</div>
                </div>
                <div class="_2_val">
                  <n-select v-model:value="data.ld_data.ycl2" :options="set.ycl" />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>异常数值：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.yc2"
                    placeholder="请输入异常数值"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>专武名称：</div>
                </div>
                <div class="_2_val">
                  <n-input
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.zw_2.name"
                    placeholder="请输入专武名称"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>刻印类型：</div>
                </div>
                <div class="_2_val">
                  <n-select
                    v-model:value="data.ld_data.zw_2.ky"
                    :options="[
                      {
                        label: `生命值`,
                        value: 'hp',
                      },
                      {
                        label: `技能伤害`,
                        value: 'skill',
                      },
                      {
                        label: `攻击力`,
                        value: 'atk',
                      },
                      {
                        label: `恢复能力`,
                        value: 'heal',
                      },
                      {
                        label: `暴击抗性`,
                        value: 'chr',
                      },
                      {
                        label: `暴击率`,
                        value: 'chc',
                      },
                    ]"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>专武屏蔽tag：</div>
                </div>
                <div class="_2_val">
                  <n-select
                    v-model:value="data.ld_data.tag2"
                    multiple
                    :options="set.pbtag"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>专武暴击率加成：</div>
                </div>
                <div class="_2_val">
                  <n-input-number
                    v-model:value="data.ld_data.zw_bjl2"
                    :size="cfg.sizebtn"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>队伍暴击率：</div>
                </div>
                <div class="_2_val">
                  <n-input-number
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.tm_bjl2"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi span="1">
              <div class="_banr">
                <div class="_2_title2" style="width: 125px">
                  <div>暴击率倍率：</div>
                </div>
                <div class="_2_val">
                  <n-input-number
                    :size="cfg.sizebtn"
                    v-model:value="data.ld_data.bl_bjl2"
                  />
                </div>
              </div>
            </n-gi>
          </n-grid>
        </div>
        对奶奶异常 一专 {{ (data.ld_data.yc ?? 0) * 1.2 }}% / 二专
        {{ (parseInt(data.ld_data.yc2 ?? 0) * 1.2).toFixed(3) }}%
      </div>
    </template>
    <template #footer>
      <n-button type="gt_y" :size="cfg.sizebtn" @click="set.save_edit(data.ld_data)"
        >保存角色</n-button
      >
      <n-button type="gt_n" :size="cfg.sizebtn" @click="set.save_del(data.ld_data)">
        删除角色
      </n-button>
    </template>
  </component>

  <div class="_mbbox boxgap">
    <div class="nbox1 select_gap">
      <n-button type="warning" @click="set.newrole">新增角色</n-button>
      <n-input placeholder="筛选角色/分类" @input="set.handinput" />
      <n-select
        placeholder="筛选属性"
        v-model:value="data.select_ss"
        :options="cfg.ss"
        @update:value="set.reload"
      />
      <n-select
        placeholder="筛选星级"
        v-model:value="data.select_star"
        :options="set.select_star"
        @update:value="set.reload"
      />
    </div>

    <div class="nbox1">
      <div class="page">
        <div @click="set.page_up_page(1)">首页</div>
        <van-pagination
          @change="set.page_up_page"
          v-model="data.page"
          :page-count="data.role_count"
          :show-prev-button="false"
          :show-next-button="false"
        />
        <div></div>
      </div>
      <div class="_list">
        <div class="_listbox" v-if="cfg.sswd > 550">
          <div style="width: 55px" class="_df">头像</div>
          <div :style="`width: ${cfg.mobile == true ? `100` : `155`}px`" class="_df">
            角色名称
          </div>
          <div style="width: 45px" class="_df">属性</div>
          <div style="width: 45px" class="_df">星级</div>
          <div style="width: 150px" class="_df">本专</div>
          <div style="width: 150px" class="_df">二专</div>
          <div style="width: 100px" class="_df" v-if="cfg.qxpd(['bz']) == true">操作</div>
        </div>
        <n-scrollbar
          :style="`max-height: ${cfg.mobile == true ? `99999` : `575`}px`"
          ref="scrollbar"
        >
          <div style="display: flex; flex-direction: column; gap: 4px">
            <template v-for="item in data.role2">
              <div class="_rolebox" v-if="cfg.sswd > 550">
                <div style="width: 55px" class="_df">
                  <img class="_ava" :src="cfg.function.ava(item.icon)" />
                </div>
                <div
                  class="_df _rolename"
                  :style="`width: ${cfg.mobile == true ? `100` : `155`}px`"
                >
                  {{ item.name }}
                </div>
                <div style="width: 45px" class="_df">{{ item.shu ?? 空 }}属性</div>
                <div style="width: 45px" class="_df">{{ item.star ?? 空 }}星</div>
                <div style="width: 150px" class="_df">
                  <n-tooltip trigger="hover">
                    <template #trigger>
                      <n-button :size="cfg.sizebtn" strong secondary>
                        {{ item.zw_1?.name ?? "未配置" }}
                      </n-button>
                    </template>
                    <div>
                      异常类型：{{ item.ycl ?? "空" }}<br />异常数值：{{ item.yc ?? "空"
                      }}<br />刻印类型：{{ set.kyl_lang[item.zw_1?.ky] ?? "空" }}
                    </div>
                  </n-tooltip>
                </div>
                <div style="width: 150px" class="_df">
                  <n-tooltip trigger="hover">
                    <template #trigger>
                      <n-button :size="cfg.sizebtn" strong secondary>
                        {{ item.zw_2?.name ?? "未配置" }}
                      </n-button>
                    </template>
                    <div>
                      异常类型：{{ item.ycl2 ?? "空" }}<br />异常数值：{{
                        item.yc2 ?? "空"
                      }}<br />刻印类型：{{ set.kyl_lang[item.zw_2?.ky] ?? "空" }}
                    </div>
                  </n-tooltip>
                </div>
                <div style="width: 100px" class="_df" v-if="cfg.qxpd(['bz']) == true">
                  <n-button :size="cfg.sizebtn" @click="set.open_edit(item)">
                    编辑
                  </n-button>
                </div>
              </div>
              <div class="_rolebox" v-else>
                <div class="__div1">
                  <img class="_ava" :src="cfg.function.ava(item.icon)" />
                  <div style="width: 15vw; text-align: center">{{ item.name }}</div>
                  <div>{{ item.shu ?? 空 }}属性 - {{ item.star ?? 空 }}星</div>
                  <div>
                    [1]{{ item.zw_1?.name ?? "未配置" }}<br />[2]{{
                      item.zw_2?.name ?? "未配置"
                    }}
                  </div>
                </div>
                <div class="__div1" v-if="cfg.qxpd(['bz']) == true">
                  <n-button :size="cfg.sizebtn" @click="set.open_edit(item)">
                    编辑
                  </n-button>
                </div>
              </div>
            </template>
          </div>
        </n-scrollbar>
      </div>
      <div class="page">
        <div @click="set.page_up_page(1)">首页</div>
        <van-pagination
          @change="set.page_up_page"
          v-model="data.page"
          :page-count="data.role_count"
          :show-prev-button="false"
          :show-next-button="false"
        />
        <div></div>
      </div>
    </div>
  </div>
</template>
<style scoped>
._ava {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: var(--ava2-bg);
  padding: var(--ava2-pd);
  border: var(--ava2-border);
}

._ava_m {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  background: var(--ava2-bg);
  padding: var(--ava2-pd);
  border: var(--ava2-border);
}

._rolename {
  font-size: 0.9em;
}
._rolename_m {
  font-size: 0.85em;
}
.select_gap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  justify-content: center;
  gap: 8px 8px;
}
@media (max-width: 550px) {
  ._ava {
    width: 11vw;
    height: 11vw;
  }
  .__div1 {
    display: flex;
    gap: 2.5vw;
    align-items: center;
    font-size: 3vw;
  }
  ._rolebox {
    justify-content: space-between;
  }
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
import { getrole } from "@/cfg/function.js";
import { Delete, Add } from "@vicons/carbon";

export default {
  components: {
    Delete,
    Add,
  },
  props: ["push"],
  setup() {
    const scrollbar = ref();
    const pagetop = ref();
    let data = reactive({
      uplist: [],
      loading: true,
      page: 1,
      page_size: 20,
      role2: [],
      role_count: 0,
      md_new: false,
      md_edit: false,
      ld_data: {},
      save: false,
      role: [],
    });
    const set = {
      imgfin_new: (e) => {
        try {
          let obj = JSON.parse(e.event.target.response);
          if (obj.code == -1) {
            e.file.status = "error";
            cfg.msg.error("上传失败，" + obj.msg);
            return false;
          }
          const name = obj.data.path;
          //检查是否包含字符串_myth
          if (name.includes("_myth")) {
            data.ld_data.mythicon = name;
          } else {
            data.ld_data.icon = name;
          }
          data.uplist = [];
        } catch (error) {
          cfg.msg.error("上传失败，" + error);
          e.file.status = "error";
          return false;
        }
      },

      handinput: (name) => {
        data.sea_name = name;
        set.up_page(1);
      },
      star: [
        {
          label: `六星角色`,
          value: 6,
        },
        {
          label: `三星角色`,
          value: 3,
        },
        {
          label: `二星角色`,
          value: 2,
        },
        {
          label: `一星角色`,
          value: 1,
        },
      ],
      select_star: [
        {
          label: "取消筛选",
          value: null,
        },
        {
          label: "六星",
          value: 6,
        },
        {
          label: "三星",
          value: 3,
        },
        {
          label: "二星",
          value: 2,
        },
        {
          label: "一星",
          value: 1,
        },
      ],
      reload: () => {
        set.up_page(1);
      },
      page_up_page: (page) => {
        data.jump = true;
        set.up_page(page);
      },
      up_page: (page) => {
        data.page = page;
        const start = (page - 1) * data.page_size;
        const end = start + data.page_size;
        data.role2 = data.role.slice();
        for (let i = 0; i < data.role2.length; i++) {
          const item = data.role2[i];
          if (data.sea_name?.length >= 1 && !item.name.includes(data.sea_name)) {
            const join_bname = item?.bname?.join(",");
            //模糊查询
            if (!join_bname.includes(data.sea_name)) {
              data.role2.splice(i, 1);
              i--;
            }
            continue;
          }
          if (data.select_star != null && data.select_star != item.star) {
            data.role2.splice(i, 1);
            i--;
            continue;
          }
          if (data.select_ss != null && data.select_ss != item.shu) {
            data.role2.splice(i, 1);
            i--;
            continue;
          }
        }
        data.role_count = Math.ceil(data.role2.length / data.page_size);
        data.role2 = data.role2.slice(start, end);
        if (cfg.mobile == false) {
          scrollbar.value.scrollTo({ top: 0, behavior: "smooth" });
        } else {
          if (data.jump == true) {
            pagetop.value?.scrollIntoView({ behavior: "smooth" });
            data.jump = false;
          }
        }
      },
      up_size: (size) => {
        data.page = 1;
        data.page_size = size;
        set.up_page(data.page);
      },
      md_span: `3 500:2`,
      md_span2: `8 500:4`,
      pbtag: [
        {
          label: `屏蔽首领异常表展示`,
          value: `会战`,
        },
        {
          label: `屏蔽44选择`,
          value: `pvp44`,
        },
      ],
      pbtag2: [
        {
          label: `会战玩法屏蔽`,
          value: `ghz`,
        },
      ],
      ss: [
        {
          label: `水属性`,
          value: `水`,
        },
        {
          label: `火属性`,
          value: `火`,
        },
        {
          label: `土属性`,
          value: `土`,
        },
        {
          label: `光属性`,
          value: `光`,
        },
        {
          label: `暗属性`,
          value: `暗`,
        },
        {
          label: `虚属性`,
          value: `虚`,
        },
      ],
      kyl_lang: {
        hp: `生命值`,
        atk: `攻击力`,
        skill: `技能伤害`,
        heal: `恢复能力`,
        chc: `暴击率`,
        chr: `暴击抗性`,
      },
      kyl: [
        {
          label: `生命值`,
          value: "hp",
        },
        {
          label: `技能伤害`,
          value: "skill",
        },
        {
          label: `攻击力`,
          value: "atk",
        },
        {
          label: `恢复能力`,
          value: "heal",
        },
        {
          label: `暴击抗性`,
          value: "chr",
        },
        {
          label: `暴击率`,
          value: "chc",
        },
      ],
      ycl: [
        {
          label: `空`,
        },
        {
          label: `击倒`,
          value: `击倒`,
        },
        {
          label: `击飞`,
          value: `击飞`,
        },
        {
          label: `重伤`,
          value: `重伤`,
        },
      ],
      open_edit: async (role) => {
        try {
          const id = role._id;
          const back = await cfg.mget({
            url: `${cfg.url2}api/admin`,
            query: {
              _id: id,
              type: "role_view",
            },
          });

          if (back.code == 0) {
            data.ld_data = back.data;
            if (data.ld_data.zw_1 == null) {
              data.ld_data.zw_1 = {};
            }
            if (data.ld_data.zw_2 == null) {
              data.ld_data.zw_2 = {};
            }
            data.md_edit = true;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          cfg.alert3({
            message: error.message,
          });
        }
      },
      bnamepush: () => {
        if (data.ld_data.bname == null) {
          data.ld_data.bname = [];
        }
        data.ld_data.bname.push("");
      },
      bnamedel: (key) => {
        data.ld_data.bname.splice(key, 1);
        data.ld_data.bname = data.ld_data.bname.filter(function (e) {
          return e;
        });
      },
      save_edit: async (ld) => {
        const id = ld._id;
        const back = await cfg.mpost({
          url: `${cfg.url2}api/admin`,
          query: {
            type: "role_edit",
            _id: id,
            user: {
              uid: cfg.user?.uid,
              authkey: cfg.user?.authkey,
              token: cfg.user?.token,
            },
          },
          post: ld,
        });
        if (back.code == 0) {
          cfg.msg.success(back.msg);
          data.md_edit = false;
        } else {
          throw { code: -1, message: back.msg };
        }
        return;
      },
      save_new: async (ld) => {
        try {
          const back = await cfg.mpost({
            url: `${cfg.url2}api/admin`,
            query: {
              type: "role_new",
              user: {
                uid: cfg.user?.uid,
                authkey: cfg.user?.authkey,
                token: cfg.user?.token,
              },
            },
            post: ld,
          });
          if (back.code == 0) {
            data.md_new = false;
            await getrole(true);
            data.role = cfg.role.slice();
            set.up_page(1);
          } else {
            throw { code: -1, message: back.msg };
          }
          return;
        } catch (error) {
          cfg.alert3({
            message: error.message,
          });
          return;
        }
        return;
      },
      save_del: async (ld) => {
        cfg.alert.warning({
          title: "警告",
          content: "确定要删除该角色吗？",
          positiveText: "删除",
          negativeText: "撤销",
          draggable: true,
          onPositiveClick: async () => {
            const id = ld._id;
            const back = await cfg.mget({
              url: `${cfg.url2}api/admin`,
              query: {
                _id: id,
                type: "role_del",
                user: {
                  uid: cfg.user?.uid,
                  authkey: cfg.user?.authkey,
                  token: cfg.user?.token,
                },
              },
            });
            data.md_edit = false;
            cfg.msg.success("删除成功");
            await getrole(true);
            data.role = cfg.role.slice();
            set.up_page(1);
          },
          onNegativeClick: () => {},
        });
      },
      newrole: () => {
        data.ld_data = {
          zw_1: {},
          zw_2: {},
        };
        data.md_new = true;

        data.save = false;
      },

      newroleoff: () => {
        if (data.save == false) {
          data.role.shift();
        }
      },
    };

    onMounted(async () => {
      if (cfg.role?.[0]?.icon == null || cfg.role?.[0]?.ycl == null) {
        await getrole();
      }
      //浅拷贝
      data.role = cfg.role.slice();
      set.up_page(1);
      data.loading = false;
    });
    return { data, cfg, set, scrollbar, pagetop };
  },
};
</script>
